<!--
 * @Description: 主界面上下card布局，实际内容由父组件填充。
 * @Author: youzi
 * @Date: 2019-08-13 08:40:03
 * @LastEditors: youzi
 * @LastEditTime: 2020-05-18 16:22:45
 * @todo:
 -->
<!--
  usage: 主要参考Role.vue
  <layout-content topTitle="查询" bottomTitle="角色信息" topPaddingBottom="-20" bottomPaddingBottom="-20">
    <template v-slot:topCard>
      上层card实际内容
    </template>
    <template v-slot:extraOperation>
      下层card标题右侧的操作区域，一般放一些button
    </template>
    <template v-slot:bottomCard>
      下层card实际内容
    </template>
  </layout-content>
参数传入，
- topTile：上层标题，
- bottomTitle：下层标题，
- topPaddingBottom：上层标题和内容的间隔
- bottomPaddingBottom：下层标题和内容的间隔
后面两个主要是用来做样式定位的。
 -->
<template>
  <div style="width: 100%;" class="card-area">
    <a-card :bordered="false" :headStyle="headStyle" class="card-area-top" v-if="topTitle.length > 0"
      ><!--  class="card-area" -->
      <p slot="title" class="card-title">{{ topTitle }}</p>
      <slot name="topCard"></slot>
    </a-card>
    <a-card :bordered="false" class="card-area card-area-bottom" :headStyle="headStyleBottom">
      <p slot="title" class="card-title">{{ bottomTitle }}</p>
      <div class="operator" slot="extra">
        <slot name="extraOperation">
          <!-- <a-button type="primary">click</a-button> -->
        </slot>
      </div>
      <slot name="bottomCard"></slot>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'defalutLayoutContent',
  data() {
    return {};
  },
  computed: {
    headStyle() {
      return {
        borderBottom: 0,
        paddingLeft: 0,
        marginBottom: this.topPaddingBottom + 'px'
      };
    },
    headStyleBottom() {
      return {
        borderBottom: 0,
        paddingRight: '10px',
        paddingLeft: 0,
        marginBottom: this.bottomPaddingBottom + 'px'
      };
    }
  },
  props: {
    topTitle: {
      type: String,
      default: '上标题'
    },
    bottomTitle: {
      type: String,
      default: '下标题'
    },
    topPaddingBottom: {
      type: Number,
      default: -40
    },
    bottomPaddingBottom: {
      type: Number,
      default: -10
    }
  }
};
</script>

<style lang="less">
@card-padding: 0.625rem 0;
.card-area {
  .ant-card-head-title {
    padding: @card-padding;
  }
  .ant-card-extra {
    padding: @card-padding;
  }
  .ant-tabs-bar {
    height: 38px;
  }
  .ant-card-body {
    padding: 10px 10px;
  }
  .card-area-bottom {
    .ant-card-body {
      margin-top: -20px;
    }
  }
  .ant-tabs-bar {
    margin-bottom: 8px;
  }
  .ant-tabs-nav-container {
    font-size: 12px;
  }
}
</style>

<style lang="less" scoped>
// @import '../../../../static/less/Common';
.card-area-bottom {
  margin-top: 0.5rem;
  .operator {
    margin-bottom: 18px;
  }
}
.card-area {
  .card-area-top,
  .card-area-bottom {
    border-radius: 6px;
  }
  .card-title {
    font-size: 1rem !important;
    font-weight: bold;
    color: #393d47;
    border-left: 4px solid #408bf4;
    padding-left: 15px;
  }
}
</style>
